<template>
  <div class="home">
    <div class="first">
      <red-card
        v-for="(item,idx) in firstMoney"
        :key="idx"
        :index="idx"
        :money="item"
      ></red-card>
    </div>
    <div class="second">
      <red-card
        v-for="(item,idx) in secondMoney"
        :key="idx"
        :index="idx+7"
        :money="item"
      ></red-card>
    </div>
    <div class="third">
      <red-card
        v-for="(item,idx) in thirdMoney"
        :key="idx"
        :index="idx+13"
        :money="item"
      ></red-card>
    </div>
  </div>
</template>

<script>
import RedCard from '@/components/RedCard.vue'
export default {
  name: 'Home',
  components: {
    RedCard
  },
  data () {
    return {
      money: [
        1000,
        500,
        500,
        500,
        500,
        200,
        200,
        200,
        200,
        200,
        200,
        200,
        200,
        200,
        200,
        200,
        200,
        200,
        200,
        200
      ],
      firstMoney: [],
      secondMoney: [],
      thirdMoney: []
    }
  },
  mounted () {
    this.money = this.randomSortArr(this.money)
    this.firstMoney = this.money.slice(0, 7)
    this.secondMoney = this.money.slice(7, 13)
    this.thirdMoney = this.money.slice(13)
  },
  methods: {
    randomSortArr (arr) {
      var res = []
      for (var i = 0, len = arr.length; i < len; i++) {
        // 随机叫个
        var randomIndex = Math.floor(Math.random() * arr.length)
        // 出列到新队伍
        res[i] = arr[randomIndex]
        // 原来的队伍人越来越少，因此上面的 randomIndex 需要实时获取 team.length
        arr.splice(randomIndex, 1)
      }
      return res
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  width: 100%;
  background: url("../assets/背景.png") no-repeat 0 0;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 60px 0;
  box-sizing: border-box;
  .first,
  .second,
  .third {
    display: flex;
    justify-content: space-between;
  }
}
</style>
